import React from 'react';
import { Row, Col } from 'antd';
import styles from './index.less';
import CountUp from 'react-countup';
import { FundTwoTone, DatabaseTwoTone, PieChartTwoTone } from '@ant-design/icons';

const countUpProps = {
  star: 0,
  duration: 2.75,
  useEasing: true,
  useGrouping: true,
  separator: ','
}

class Statistics extends React.Component {

  constructor(props) {
    super(props)
  }

  render() {
    const {revTotal, rate} = this.props.info;
    return (
      <React.Fragment>
        <Row gutter="24" className={styles.container}>
          <Col span="8">
            <div className={styles.item1}>
              <div>到馆人数</div>
              <CountUp className={styles.num} end={revTotal} {...countUpProps} />
              <FundTwoTone className={styles.icon} />
            </div>
          </Col>
          <Col span="8">
            <div className={styles.item2}>
              <div>读者总数</div>
              <CountUp className={styles.num} end={revTotal} {...countUpProps} />
              <DatabaseTwoTone className={styles.icon} />
            </div>
          </Col>
          <Col span="8">
            <div className={styles.item3}>
              <div>到馆率</div>
              <CountUp className={styles.num} end={rate} suffix='%' decimals='2' {...countUpProps} />
              <PieChartTwoTone className={styles.icon} />
            </div>
          </Col>
        </Row>
      </React.Fragment>
    )
  }
}

export default Statistics